<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, Card, Table, Space, message } from 'ant-design-vue';
import { getSubaccountsTableData } from '#/api/core/explanation';
import modal from './modal.vue';
import SearchForm from './searchForm.vue';
import { IconifyIcon } from '@vben/icons';
import { useRoute } from 'vue-router';

defineOptions({ name: 'SubAccounts' });
const dataSource = ref([]);
const tableLoading = ref(false);
const route = useRoute();

const [ModalForm, modalApi] = useVbenModal({
  connectedComponent: modal,
});
const fetchTableData = async (params?: SearchParams & PaginationParams) => {
  tableLoading.value = true;
  await getSubaccountsTableData(params)
    .then((response) => {
      dataSource.value = response.list;
    })
    .catch((error) => {
      message.error(error);
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
const handleSearch = (values: SearchParams & PaginationParams) => {
  fetchTableData(values);
};
function openModal(record?: TypeRecord) {
  modalApi.setData({
    data: {
      record,
      isEdit: !!record,
    },
  });
  modalApi.open();
}

onMounted(() => {
  fetchTableData();
});

const columns = [
  {
    title: '登录账号',
    dataIndex: '登录账号',
    key: '登录账号',
  },
  {
    title: '员工姓名',
    dataIndex: '员工姓名',
    key: '员工姓名',
  },
  {
    title: '手机号',
    dataIndex: '手机号',
    key: '手机号',
  },
  {
    title: '角色',
    dataIndex: '角色',
    key: '角色',
  },
  {
    title: '职位',
    dataIndex: '职位',
    key: '职位',
  },
  {
    title: '备注',
    dataIndex: '备注',
    key: '备注',
  },

  {
    title: '状态',
    dataIndex: '状态',
    key: '状态',
  },
  {
    title: '最近登录',
    dataIndex: '最近登录',
    key: '最近登录',
  },
  {
    dataIndex: 'action',
    key: 'action',
  },
];
</script>

<template>
  <Page :title="route.meta.title" >
    <template #extra>
        <Button
          type="primary"
          @click="openModal()"
          class="flex-center inline-flex gap-2"
        >
          <template #icon>
            <IconifyIcon icon="heroicons:plus" />
          </template>
          新增子账号
        </Button>
      </template>
    <ModalForm />
    <Card >
      
      <SearchForm :handleSearch="handleSearch" />
      <Table size="small" :dataSource="dataSource" :columns="columns">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <Space>
              <Button type="link" @click="openModal(record as TypeRecord)"
                >编辑</Button
              >
              <Button type="link">删除</Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>
  </Page>
</template>
